<template>
  <div class="step">
    <span :class="['item', i<=index?'active':'']" v-for="(s,i) in step" :key="i">
      <span class="sort">{{i+1}}</span>
      {{s}}
    </span>
  </div>
</template>

<script>
export default {
  props: ['index'],
  data () {
    return {
      step: ['选择编排学校', '调整编排顺序', '完成']
    }
  }
}
</script>

<style lang="stylus" scoped>
.step
  margin-bottom 40px
  .item
    margin-right 16px
    color #ccc
    .sort
      display inline-block
      width:18px;
      height:18px;
      font-size 14px
      background:#ccc
      border-radius:50%;
      text-align center
      line-height 18px
      color #fff
    &.active
      color #555
      .sort
        background rgba(65,119,255,1);
</style>
